<template>
	<div class="rader">
		<div class="jkBox">
			<div>正常连接数量</div>
			<span>{{ jkNumDB || 0}}</span>
		</div>
		<div class="raderPicBox">
			<img class="raderPic" src="~@/assets/img/rader1.png" alt />
			<img class="raderPic raderPicAnimation1" src="~@/assets/img/rader2.png" alt />
			<img class="raderPic raderPicAnimation2" src="~@/assets/img/rader3.png" alt />
		</div>
		<div class="gzBox">
			<div>断连数量</div>
			<span>{{ gzNumOS || 0}}</span>
			<div>严重告警</div>
			<span>{{yzgj || 0}}</span>
			<div>普通告警</div>
			<span style="color:#E6A23C;">{{ptgj || 0}}</span>
		</div>
	</div>
</template>

<script>
	// import rader1Path from '@/assets/img/rader1.png';
	// import {
	// 		fetchData,
	// 		getFaultStatistics,
	// 		putWhetherToAlert
	// 	} from "@/api/index.js";
	import {
		fetchData,
		getRealTime,
		getFaultStatistics,
		getSqlLinkTest,
		getMySqlLinkTest,
		getOracleLinkTest,
		getOsLinkTest
	} from '@/api/index.js'
	import bus from 'common/bus.js';
	import {
		number
	} from 'echarts';

	export default {
		data() {
			return {
				postData: {
					opera: 'dbConnect',
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: '',
						sortOrders: ''
					},
					filtersType: 'fuzzyquery',
					filters: {},
				},
				postOSData: {
					opera: 'hostconnect',
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: '',
						sortOrders: ''
					},
					filtersType: 'fuzzyquery',
					filters: {

					},
				},
				jkNumDB: 0,
				gzNumDB: 0,
				yzgj: 0,
				ptgj: 0,
				timer: null,
				jkNumOS: 0,
				gzNumOS: 0,
				SQLserverS:0,
				SQLserverE:0,
				networkS:0,
				networkE:0,
				osS:0,
				osE:0,
				MysqlS:0,
				MysqlE:0,
				OracleS:0,
				OracleE:0,
				timerName: 'Rader',
				timerEventName: 'timerRader',
				timerInterval: 1000 * 30,
			}
		},
		created() {
			this.getInfo()
			this.timein();
			this.gaojingData()
			// this.getOSData();
			bus.$emit('timerNewTodo', {
				name: this.timerName,
				eventName: this.timerEventName,
				interval: this.timerInterval,
				intervalNow: 0
			});
			bus.$on(this.timerEventName, msg => {
				if (msg.isGetData) {
					// this.getData();
					// this.getOSData();
				}
			});

		},
		beforeDestroy() {
		    clearInterval(this.timer)
		    this.timer = null
		},
		computed: {
			jkNumFn() {
				return this.jkNumDB + this.jkNumOS;
			},
			gzNumFn() {
				return this.gzNumDB + this.gzNumOS;
			}
		},
		methods: {
			timein() {
				this.timer = setInterval(() => {
					// 操作
					this.getInfo()
					this.gaojingData()
				}, 30000);
				// 通过$once来监听定时器，在beforeDestroy钩子可以被清除
				// this.$once('hook:beforeDestroy', () => {
				//   clearInterval(this.timer);
				// })
			},
			async getInfo(){
				await getSqlLinkTest().then(res=>{
					console.log(res,'结果')
					this.SQLserverS = res.CG
					this.SQLserverE = res.SB
				})
				await getOsLinkTest().then(res=>{
					console.log(res,'结果2')
					this.networkS = res.network.CG
					this.networkE = res.network.SB
					this.osS = res.os.CG
					this.osE = res.os.SB
				})
				await getMySqlLinkTest().then(res=>{
					console.log(res,'结果3')
					this.MysqlS = res.CG
					this.MysqlE = res.SB
				})
				await getOracleLinkTest().then(res=>{
					console.log(res,'结果4')
					this.OracleS = res.CG
					this.OracleE = res.SB
				})
				this.$nextTick(()=>{
					this.a()
				})
				
				
			},
			a(){
				this.jkNumDB = this.SQLserverS + this.networkS + this.osS + this.MysqlS + this.OracleS
				this.gzNumOS = this.SQLserverE + this.networkE + this.osE + this.MysqlE + this.OracleE
				console.log(this.jkNumDB,this.gzNumOS,99)
			},
			gaojingData() {
				// fetchData({
				//     postData : JSON.stringify(this.postAlertcount)
				// }).then(_=>console.log(_))
				getFaultStatistics()
					.then((res) => [
						...res["Mysql"],
						...res["Oracle"],
						...res["SQLServer"],
						...res["Network"],
						...res["OS"],
					])
					.then((res) => {
						// console.log('zzz',res)
						let _alertNum = {
							LEVEL_1: 0,
							LEVEL_2: 0,
							LEVEL_3: 0
						};

						res.forEach((element) => {
							if (element.alertLevel == 2) {
								_alertNum.LEVEL_2 += 1;
							} else if (element.alertLevel == 3) {
								_alertNum.LEVEL_3 += 1;
							} else {
								_alertNum.LEVEL_1 += 1;
							}
						});
						this.yzgj = _alertNum.LEVEL_3
						this.ptgj = _alertNum.LEVEL_2 + _alertNum.LEVEL_1
					});
			},
			// getData() {
			// 	getRealTime().then((res) => {
			// 		// console.log('res',res)
			// 		if (res) {
			// 			if (res.Network.length < 1) {
			// 				this.gzNumOS = parseInt(res.db[0]) + parseInt(res.os[0])
			// 				this.jkNumDB = (parseInt(res.db[1]) - parseInt(res.db[0])) + (parseInt(res.os[1]) -
			// 					parseInt(res.os[0]))
			// 			} else if (res.db.length < 1) {
			// 				this.gzNumOS = parseInt(res.os[0]) + parseInt(res.Network[0])
			// 				this.jkNumDB = (parseInt(res.os[1]) - parseInt(res.os[0])) + (parseInt(res.Network[
			// 					1]) - parseInt(res.Network[0]))
			// 			} else if (res.os.length < 1) {
			// 				this.gzNumOS = parseInt(res.db[0]) + parseInt(res.Network[0])
			// 				this.jkNumDB = (parseInt(res.db[1]) - parseInt(res.db[0])) + (parseInt(res.Network[
			// 					1]) - parseInt(res.Network[0]))
			// 			} else if (res.Network.length > 0 && res.db.length > 0 && res.os.length > 0) {
			// 				this.gzNumOS = parseInt(res.db[0]) + parseInt(res.os[0]) + parseInt(res.Network[0])
			// 				this.jkNumDB = parseInt(res.db[1]) + parseInt(res.os[1]) + parseInt(res.Network[1])
			// 				this.jkNumDB = (parseInt(res.db[1]) - parseInt(res.db[0])) + (parseInt(res.Network[
			// 					1]) - parseInt(res.Network[0])) + (parseInt(res.os[1]) - parseInt(res.os[0]))
			// 			} else {
			// 				this.gzNumOS = 0
			// 				this.jkNumDB = 0
			// 			}
			// 		}
			// 	});
			// },
			// getOSData(){
			//     fetchData({
			//         postData: JSON.stringify(this.postOSData)
			//     }).then((res) => {
			//         // console.table(res.data)

			//         let _jkNum = 0;
			//         let _gzNum = 0;
			//         res.data.forEach(element => {
			//             if (element.MAX_ALERTLEVEL < 2) {
			//                 _jkNum ++;
			//             } else if (element.MAX_ALERTLEVEL >= 2) {
			//                 _gzNum ++;
			//             }
			//         });

			//         this.jkNumOS = _jkNum;
			//         this.gzNumOS = _gzNum;
			//     });
			// },


		},
		beforeDestroy() {
			bus.$emit('timerNewTodo', {
				name: this.timerName
			});
		},
	}
</script>

<style scoped>
	@media screen and (max-width: 1365px) and (min-width: 1280px) {
		.gzBox {
			font-size: 12px;
		}

		.jkBox {
			font-size: 12px;
		}
	}

	@media screen and (max-width: 1600px) and (min-width: 1365px) {
		.gzBox {
			font-size: 14px;
		}

		.jkBox {
			font-size: 14px;
		}
	}

	@media screen and (max-width: 1920px) and (min-width: 1600px) {
		.gzBox {
			font-size: 16px;
		}

		.jkBox {
			font-size: 16px;
		}
	}

	@media screen and (max-width: 2560px) and (min-width: 1920px) {
		.gzBox {
			font-size: 18px;
		}

		.jkBox {
			font-size: 18px;
		}
	}

	@media screen and (max-width: 3840px) and (min-width: 2560px) {
		.gzBox {
			font-size: 20px;
		}

		.jkBox {
			font-size: 18px;
		}
	}

	@media screen and (min-width: 3840px) {
		.gzBox {
			font-size: 30px;
		}

		.jkBox {
			font-size: 28px;
		}
	}

	.rader {
		/* height: calc(100% - 22px - 8px); */
		height: calc(21vh /var(--zoom));
		/* text-align: center; */
		color: aliceblue;
		display: grid;
		grid-template-columns: 1fr 2fr 1fr;
		justify-content: center;
	}

	.rader div {
		/* width: 25%; */
		height: 100%;
		float: left;
		position: relative;
		text-align: center;
		/* color: #909399; */
	}

	.rader div.jkBox div {
		width: 100%;
		height: 50%;
	}

	.rader div.jkBox div::before {
		display: inline-block;
		content: "";
		height: 100%;
		vertical-align: middle;
	}

	.rader div.jkBox span {
		color: #67c23a;
		font-size: xx-large;
	}

	.rader div.gzBox div {
		width: 100%;
		height: 50%;
		padding: 8px 0px;
	}

	.rader div.gzBox div::before {
		display: inline-block;
		content: "";
		height: 100%;
		vertical-align: middle;
	}

	.rader div.gzBox span {
		color: #f56c6c;
		font-size: xx-large;
	}

	.rader div.raderPicBox {
		width: 100%;
		display: grid;
		justify-items: center;
	}

	.rader div.raderPicBox img.raderPic {
		width: 65%;
		position: absolute;
		margin: auto;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}

	.rader div.raderPicBox img.raderPicAnimation1 {
		-webkit-animation: spin1 3s linear infinite;
		animation: spin1 3s linear infinite;
	}

	.rader div.raderPicBox img.raderPicAnimation2 {
		-webkit-animation: spin2 8s linear infinite;
		animation: spin2 8s linear infinite;
	}

	.jkBox,
	.gzBox {
		display: grid;
		justify-content: center;
		align-content: center;
		/* font-size: 20px; */
		/* grid-template-rows: 1fr 1fr ; */
	}

	@keyframes spin1 {
		0% {
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
			-ms-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@keyframes spin2 {
		0% {
			-webkit-transform: rotate(0deg);
			-ms-transform: rotate(0deg);
			transform: rotate(0deg);
		}

		100% {
			-webkit-transform: rotate(-360deg);
			-ms-transform: rotate(-360deg);
			transform: rotate(-360deg);
		}
	}
</style>